<template>
    <div class="app-container">
        <el-form ref="payForm" :model="payForm" :rules="rules" class="form-container">
            <div class="createPost-main-container">
                <div style="margin-bottom: 20px">
                    <label>微信支付</label>
                </div>
                <el-form-item prop="mchid" style="margin-bottom: 40px;" label-width="90px" label="商户号:">
                    <el-input v-model="payForm.mchid" :rows="1" class="article-textarea" autosize placeholder="请输入商户号" />
                </el-form-item>
                <el-form-item prop="signkey" style="margin-bottom: 40px;" label-width="90px" label="商户密钥:">
                    <el-input v-model="payForm.signkey" :rows="1" class="article-textarea" autosize placeholder="请输入商户密钥" />
                </el-form-item>
                <el-form-item prop="key_path" style="margin-bottom: 40px;" label-width="150px" label="商户API证书（apiclient_cert.p12）">
                    <FileUpload :limit="1" :file-list="keyPathList" @fileListChange="keyPathChange" />
                </el-form-item>
                <el-form-item prop="cert_file" style="margin-bottom: 40px;" label-width="150px" label="商户API证书（apiclient_cert.pem）">
                    <FileUpload :limit="1" :file-list="certFileList" @fileListChange="certFileChange" />
                </el-form-item>
                <el-form-item prop="key_file" style="margin-bottom: 40px;" label-width="150px" label="商户API证书私钥（apiclient_key.pem）">
                    <FileUpload :limit="1" :file-list="keyFileList" @fileListChange="keyFileChange" />
                </el-form-item>
                <el-button v-loading="loading" style="margin-left: 10px;" type="primary" @click="submitForm">
                    保存
                </el-button>
            </div>
        </el-form>

        <div style="text-align:right;padding-bottom: 10px;border-top: 2px grey dashed;margin-top: 20px;padding-top: 10px">
            <el-row>
                <el-col :span="18">
                    <div style="text-align: left">
                        <div>微信支付平台证书</div>
                        <div style="color: grey;font-size: 14px">*证书到期前5-10天请及时重新获取微信支付平台证书。</div>
                    </div>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" @click="gainWxpayPlatformCerts">
                        {{ wxpay_platform_certs.length > 0 ? '更新' : '获取' }}
                    </el-button>
                </el-col>
            </el-row>
        </div>
        <el-table :data="wxpay_platform_certs" border fit highlight-current-row style="width: 100%">
            <el-table-column label="证书序号" prop="serial_no" sortable="custom" align="center">
                <template slot-scope="{ row }">
                    <span>{{ row.serial_no }}</span>
                </template>
            </el-table-column>
            <el-table-column label="启用时间" prop="effective_time" align="center">
                <template slot-scope="{ row }">
                    <span>{{ row.effective_time }}</span>
                </template>
            </el-table-column>
            <el-table-column label="有效时间" prop="expire_time" align="center">
                <template slot-scope="{ row }">
                    <span>{{ row.expire_time }}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { isJSON } from '@/common/js/util'
import { fetch, set, gainPlatformCerts } from '@/pay/api/conf/wx'

import FileUpload from '@/platform/components/FileUpload'

const defaultForm = {
    mchid: '',
    signkey: '',
    key_path: '',
    cert_file: '',
    key_file: ''
}

export default {
    components: { FileUpload },
    data() {
        const validateRequire = (rule, value, callback) => {
            if (value === '') {
                this.$message({
                    message: rule.message,
                    type: 'error'
                })
                callback(new Error())
            } else {
                callback()
            }
        }
        return {
            payForm: Object.assign({}, defaultForm),
            rules: {
                mchid: [{ validator: validateRequire, message: '商户号为必填字段', trigger: 'blur' }],
                signkey: [{ validator: validateRequire, message: '商户密钥为必填字段', trigger: 'blur' }]
            },
            loading: false,
            keyPathList: [],
            certFileList: [],
            keyFileList: [],
            wxpay_platform_certs: []
        }
    },
    created() {
        fetch().then(res => {
            this.payForm.mchid = res.data.mchid
            this.payForm.signkey = res.data.signkey
            this.payForm.key_path = res.data.key_path
            this.payForm.cert_file = res.data.cert_file
            this.payForm.key_file = res.data.key_file
            if (res.data.key_path !== null && res.data.key_path !== '' && res.data.key_path !== undefined) {
                this.keyPathList.push({
                    name: res.data.key_path
                })
            }
            if (res.data.cert_file !== null && res.data.cert_file !== '' && res.data.cert_file !== undefined) {
                this.certFileList.push({
                    name: res.data.cert_file
                })
            }
            if (res.data.key_file !== null && res.data.key_file !== '' && res.data.key_file !== undefined) {
                this.keyFileList.push({
                    name: res.data.key_file
                })
            }
            if (isJSON(res.data.wxpay_platform_certs)) {
                this.wxpay_platform_certs = JSON.parse(res.data.wxpay_platform_certs)
            }
        })
    },
    methods: {
        keyPathChange(data) {
            if (data.fileList.length > 0) {
                this.payForm.key_path = data.fileList[0].name
            }
        },
        certFileChange(data) {
            if (data.fileList.length > 0) {
                this.payForm.cert_file = data.fileList[0].name
            }
        },
        keyFileChange(data) {
            if (data.fileList.length > 0) {
                this.payForm.key_file = data.fileList[0].name
            }
        },
        submitForm() {
            this.$refs.payForm.validate(valid => {
                if (valid) {
                    this.loading = true
                    const data = this.payForm
                    set(data).then(response => {
                        this.$notify({
                            title: '成功',
                            message: '修改成功',
                            type: 'success',
                            duration: 2000
                        })
                        // this.postForm.status = 'published'
                        this.loading = false
                        // this.$router.push('/store/index')
                    }).catch(err => {
                        console.log(err)
                        this.loading = false
                    })
                }
            })
        },
        gainWxpayPlatformCerts() {
            gainPlatformCerts().then(res => {
                if (res.errorCode == 200) {
                    if (this.wxpay_platform_certs.length > 0) {
                        this.$notify({
                            title: '成功',
                            message: '更新证书成功',
                            type: 'success',
                            duration: 2000
                        })
                    } else {
                        this.$notify({
                            title: '成功',
                            message: '获取证书成功',
                            type: 'success',
                            duration: 2000
                        })
                    }
                    if (isJSON(res.data.wxpay_platform_certs)) {
                        this.wxpay_platform_certs = JSON.parse(res.data.wxpay_platform_certs)
                    }
                } else {
                    this.$notify({
                        title: '失败',
                        message: '获取证书失败',
                        type: 'error',
                        duration: 2000
                    })
                }
            })
        }
    }
}
</script>

<style>
</style>
